{% extends 'shop/base.html' %}
{% load money %}
{% block title %}
    提交订单
{% endblock %}
{% block style %}
    <script src="/static/shop/js/jquery.min.js"></script>
    <script src="/static/shop/js/bootstrap.js"></script>
    <link rel="stylesheet" href="/static/shop/css/bootstrap.css">
    <link rel="stylesheet" href="/static/shop/css/footer.css">
    <link rel="stylesheet" href="/static/shop/css/search.css">
{% endblock %}
{% block lable %}
    <div class="search">
        <div class="row ">
            <div class="col-lg-5">
                <img src="/static/shop/images/logo.png" alt="..." class="img-rounded">
                <span>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;提交订单</span>
            </div>
            <div class="col-lg-6 col-lg-offset-1 search_bar">
                 <form  method="post" action="/shop/seek/">
                    {% csrf_token %}
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="搜索商品" name="goods">
                        <span class="input-group-btn">
                    <button class="btn btn-success" style="padding: 6px 50px" type="submit" >搜索</button>
                </span>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}
{% block contenter %}
    <div class="main">
        <!--收货地址-->
        {% csrf_token %}
        <div class="panel panel-default ">
            <div class="panel-heading col-lg-12">确认收货地址</div>
            <div class="panel-body">
                <div>
                    <p id="address">{{ address.acc_addr }} ({{ address.acc_name }} 收) {{ address.acc_phone|phone }}</p>
                    <a style="margin-left: 500px" class="btn btn-default" href="/shop/addr_manage/{{ address.id }}/"
                       role="button">编辑收货地址</a>
                </div>

            </div>
        </div>
        <!--支付方式-->


        <div class="panel panel-default ">
            <div class="panel-heading col-lg-12">支付方式</div>
            <div class="panel-body">
                <div class="radio">
                    <label>
                        <input type="radio" name="paymethod" value="option1">
                        <img src="/static/shop/images/pay/yhk.png" alt="..." class="img-thumbnail">
                    </label>
                    <label>
                        <input type="radio" name="paymethod" value="option2">
                        <img src="/static/shop/images/pay/wx.png" alt="..." class="img-thumbnail">
                    </label>
                    <label>
                        <input type="radio" name="paymethod" value="option3" checked>
                        <img src="/static/shop/images/pay/zfb.png" alt="..." class="img-thumbnail">
                    </label>
                    <label>
                        <input type="radio" name="paymethod" value="option4">
                        <img src="/static/shop/images/pay/yl.png" alt="..." class="img-thumbnail">
                    </label>
                </div>

            </div>
        </div>


        <!--商品列表-->
        <div class="panel panel-default ">
            <div class="panel-heading col-lg-12">商品列表</div>
            <div class="panel-body">
                <table class="table table-bordered table-hover">
                    <tr align="center" valign="middle">
                        <td>序号</td>
                        <td>图片</td>
                        <td>商品名称</td>
                        <td>商品单位</td>
                        <td>商品价格</td>
                        <td>数量</td>
                        <td>小计</td>
                    </tr>
                    {% for i,j in goods_array %}
                        <tr align="center" valign="center">
                            <td id='{{ i.id }}'>{{ i.id }}</td>
                            <td>
                                <img class="img-thumbnail" src="/static/{{ i.g_picture }}" width="60px"
                                     alt="">
                            </td>
                            <td>{{ i.g_name }}</td>
                            <td>{{ i.g_unit }}</td>
                            <td>{{ i.g_price }}元</td>
                            <td>{{ j }}</td>
                            <td>{% money i.g_price j %}</td>
                        </tr>
                    {% endfor %}
                </table>
            </div>
        </div>

        <!--总金额结算-->
        <div class="panel panel-default">
            <div class="panel-heading col-lg-12">总金额结算</div>
            <div class="panel-body">
                <table class="table table-bordered table-hover">
                    <tr align="center" valign="middle">
                        <td>商品件数</td>
                        <td>总金额</td>
                        <td>运费</td>
                        <td>实付款</td>
                    </tr>
                    <tr align="center" valign="center">
                        <td>{{ count }}</td>
                        <td>
                            {{ all_money }}
                        </td>
                        <td>0</td>
                        <td id="all_money">{{ all_money }}</td>
                    </tr>
                </table>
            </div>
        </div>

        <!--提交订单按钮-->
        <div>
            <a type="submit" class="btn btn-success col-lg-3 col-lg-offset-9" id='pay_su'>提交订单</a>
        </div>
    </div>
{% endblock %}
{% block script %}
    <script>
        $('#pay_su').click(function () {
            var pay_method = $('input[type=radio][name=paymethod]:checked').val();
            var address = $('#address').html();
            var all_money = $('#all_money').html();
            var all_goods_id =[]
            $("table tr").each(function () {
                 goods_id = $(this).find('td').eq(0).attr('id')
                all_goods_id.push(goods_id)
            })

            var senddata = {
                pay_method: pay_method,
                address: address,
                all_money: all_money,
                all_goods_id: all_goods_id.join(','),
                csrfmiddlewaretoken: "{{ csrf_token }}"
            };
            console.log(senddata)
            $.ajax({
                url: "/shop/pay/",
                type: 'post',
                data: senddata,
                success: function (data) {
                    window.location.href = data['url']
                },
                error: function (error) {
                    console.log(error)
                }
            });
        })
    </script>
{% endblock %}
